<template>
        <el-row>
            <!-- 头部 -->
            <el-col :span="24">
                <el-card shadow="hover">
                    <el-breadcrumb :separator-icon="ArrowRightBold">
                        <el-breadcrumb-item :to="{ path: '/admin_index' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
                        <el-breadcrumb-item>日志记录</el-breadcrumb-item>
                    </el-breadcrumb>
                </el-card>
            </el-col>
            <div style="padding: 5px;"></div>
            <!-- 内容区域 -->
            <el-col :span="24">
                <el-card shadow="hover">
                    <template #header>
                        <div style="display: flex; align-items: center; gap: 10px;">
                            <el-button type="primary">日志记录</el-button>
                            <el-input v-model="searchKeyword" style="width: 260px;" placeholder="请输入内容" @keyup.enter="handleSearch" />
                            <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
                            <el-button @click="resetSearch">重置</el-button>
                        </div>
                    </template>

                    <!-- 表格 -->
                    <el-table :data="tableData.list" :border="true" style="width: 100%">
                        <el-table-column prop="id" label="ID" width="80" />
                        <el-table-column prop="content" label="操作记录" />
                        <el-table-column prop="address" label="地区城市" width="260"/>
                        <el-table-column prop="uip" label="操作IP地址" width="200"/>
                        <el-table-column prop="createtime" label="操作IP地址" width="200"/>              	
                        <el-table-column label="用户状态" width="100">
                            <template #default="scope">
                                <el-tag v-if="scope.row.status == 1" type="success">状态正常</el-tag>
                                <el-tag v-if="scope.row.status == 2" type="danger">状态异常</el-tag>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页 -->
                    <div style="padding: 10px;"></div>
                    <el-pagination small background v-model:currentPage="page.pagenum" v-model:page-size="page.pagesize"
                        :page-sizes="[20, 50]" :small="small" :background="background"
                        layout="total, prev, pager, next, jumper" :total="page.total" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" />
                </el-card>
            </el-col>
        </el-row>
</template>

<script setup>

import { reactive, onMounted, ref } from 'vue'
import { request_post } from '@/common/axios/request.js'
import { ArrowRightBold, Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const tableData = reactive({ list: null })
const page = reactive({
    pagenum: 1,
    pagesize: 20,
    total: 0,
    keyword: ''
})

const searchKeyword = ref('')

onMounted(() => {
	adminAccountLogger()
})

function adminAccountLogger(){
    request_post('admin_account_logger', page).then(res => {
        if (res.data.code == 200) {
            tableData.list = res.data.data.data
            page.total = res.data.data.total
        } else {
            ElMessage.error(res.data.msg || '获取数据失败')
        }
    }).catch(err => {
        ElMessage.error('网络错误，请稍后重试')
    })
}

function handleSearch() {
    page.pagenum = 1
    page.keyword = searchKeyword.value.trim()
    adminAccountLogger()
}

function resetSearch() {
    searchKeyword.value = ''
    page.keyword = ''
    page.pagenum = 1
    adminAccountLogger()
}

function handleSizeChange(pagesize){
    page.pagesize = pagesize
    page.pagenum = 1
    adminAccountLogger()
}
function handleCurrentChange(val){
    page.pagenum = val
    adminAccountLogger()
}

</script>

<style>
</style>
